<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui">
	<h:head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>SGC</title>
		<style type="text/css" media="all">
			@charset "iso-8859-1";
			* {
				border:none;
				margin:0px;
				text-decoration:none;
				font-family: Trebuchet MS;
				font-size: 12px;
				color: #006633;
			}
			body { background: #D4D0C8 url(/soAutos/images/bg.jpg) repeat fixed; }
			a.linkDiferenciado {
				text-decoration:none;
				color:#fff;
			}
			a.linkDiferenciado:visited {
				text-decoration:none;
				color: #fff;
			}
			a.linkDiferenciado:hover {
				text-decoration:underline;
				color: #fff;
			}
			a.linkDiferenciado:active {
				text-decoration:none;
				color: #fff;
			}
			#principalLogin {
				background: #006633 url(/soAutos/images/bg2.jpg) repeat-x left top;
				position:absolute;
				top:50%;
				width:100%;
				height:178px;
				margin-top:-97px;
				text-align:center;
				margin-right: auto;
				margin-left: auto;
				margin-bottom: 0px;
			}
			#principalLogin #conteudoLogin {
				width: 770px;
				position: relative;
				margin: auto;
				height: 178px;
			}
			#principalLogin #conteudoLogin #qsgc {
				height: 16px;
				width: 248px;
				position: absolute;
				left: 130px;
				top: 75px;
			}
			#principalLogin #conteudoLogin #linhaVertLogin {
				position: absolute;
				height: 150px;
				width: 1px;
				left: 390px;
				top: 16px;
			}
			#principalLogin #conteudoLogin #logoQuad {
				position: absolute;
				height: 22px;
				width: 43px;
				left: 333px;
				top: 94px;
			}
			#principalLogin #conteudoLogin #formAreaLogin {
				position: absolute;
				height: 120px;
				width: 472px;
				left: 405px;
				top: 27px;
				background: url(/soAutos/images/bgAreaLogin.png) no-repeat left top;
			}
			#principalLogin #conteudoLogin #formAreaLogin #acesso {
				position: absolute;
				height: 126px;
				width: 29px;
				left: 15px;
				top: -2px;
			}
			#rotUsuario {
				position: absolute;
				color: #CCCCCC;
				text-align:right;
			}
			#rotSenha {
				color: #CCCCCC;
				text-align:right;
			}
			#principalLogin #conteudoLogin #formAreaLogin #campoUsuario {
				position: absolute;
				top: 17px;
				left: 104px;
			}
			#principalLogin #conteudoLogin #formAreaLogin #campoUSenha {
				position: absolute;
				top: 48px;
				left: 104px;
			}
			#principalLogin #conteudoLogin #formAreaLogin #lembreteSenha {
				font: normal 10px "Trebuchet MS";
				color: #CCCCCC;
				position: absolute;
				left: 105px;
				top: 68px;
				text-align: left;
				text-decoration: underline;
			}
			#principalLogin #conteudoLogin #formAreaLogin #btAcessar {
				position: absolute;
				left: 273px;
				top: 250px;
				border-style: none;
			}
			#principalLogin #conteudoLogin #formAreaLogin #mensagensErro {
				font-size: 10px;
				color: #FFFF00;
				position: absolute;
				left: 56px;
				top: 85px;
				text-align: left;
				width: 200px;
			}
			#principalLogin #conteudoLogin #formAreaLogin #mensagensErro img {
				display: block;
				padding-bottom: -3px;
				float: left;
				margin-right: 3px;
			}
			#principalLogin #conteudoLogin #rodape {
				position: absolute;
				color: #9AC43C;
				height: 0px;
				width: auto;
				left: 206px;
				top: 180px;
			}
			principalLogin #conteudoLogin #rodape span {
				display:block;
				text-align:right;
				padding-top:60px;
				padding-right:40px;
				color: #4A3019;
				font-size: 10px;
				width: 300px;
				float: right;
			}
			principalLogin #conteudoLogin #rodape img {
				display:block;
				padding-top: 15px;
				padding-left: 40px;
				width: auto;
				float: left;
			}
			table tr td.alinhaDir { text-align:right; }
			table td.width100 { width:100px; }
		</style>
	</h:head>
	<body>
		<p:growl id="messages"/>
		<div id="principalLogin">
			<div id="conteudoLogin">
				<img src="/soAutos/images/qsgc.png" alt="QSGC" id="qsgc" />
				<img src="/soAutos/images/linhaVertLogin.png" alt="Quad" id="linhaVertLogin" />
				<img src="/soAutos/images/logoQuad.png" alt="Quad" id="logoQuad" />
				<h:form id="formAreaLogin" >
					<p:focus for="usuario"/>
					<div>
					<img src="/soAutos/images/acesso.png" alt="Acesso" id="acesso" />
						<h:panelGrid columns="2" columnClasses="width100 alinhaDir, width100 alinhaDir">
							<h:outputText></h:outputText>
							<h:outputText></h:outputText>							
							<h:outputText></h:outputText>
							<h:outputText></h:outputText>							
							<h:outputText></h:outputText>
							<h:outputText></h:outputText>							
							<h:outputText></h:outputText>
							<h:outputText></h:outputText>
							<h:column>
								<label id="rotSenha">Usu&aacute;rio:</label>
							</h:column>
							<h:inputText id="usuario" value="#{controleLogin.login}" size="20"/>
							<h:column>
								<label id="rotSenha">Senha:</label>
							</h:column>
							<h:column>							
								<h:inputSecret id="senha" value="#{controleLogin.senha}" size="20"/>
							</h:column>
							<h:outputText value=""/>
							<h:column>
								<h:commandLink action="#{controleLogin.acessar}">
									<h:graphicImage url="/images/btAcessar.png"/>
								</h:commandLink>
							</h:column>	
						</h:panelGrid>
					</div>
				</h:form>
				<div id="rodape">
					Produzido por www.quad.com.br &copy; 2006 - 2011
				</div>
			</div>
		</div>
	</body>
</html>